<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item v-for="(item, index) of actionList" :key="index" :timestamp="item.create_time" placement="top">
        <el-card>
          <p>
            <el-icon class="el-icon-link" />
            {{ i18n('user.center.login.ip') }}：{{ item.ip_address }}
          </p>
          <p>
            <el-icon class="el-icon-location-outline" />
            {{ i18n('user.center.login.location') }}：{{ item.address }}
          </p>
          <p>
            <el-icon class="el-icon-bangzhu" />
            {{ i18n('user.center.login.browser') }}：{{ item.browser }}
          </p>
          <p>
            <el-icon class="el-icon-monitor" />
            {{ i18n('user.center.login.system') }}：{{ item.system }}
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup name="timeline">
  import { useBase } from "@/hooks/base/useBase"

  const { router, i18n } = useBase()

  const actionList = ref([])

  const loadActionList = () => {
    $http({
      url: $http.adornUrl('/user/action'),
      method: 'get',
    }).then(({ data }) => {
      if (data && data.status === 200) {
        actionList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  onMounted(() => {
    loadActionList()
  })
</script>

<style lang="scss" scoped>
  .el-card.is-always-shadow {
    box-shadow: none;
  }
  .el-card {
    border: 1px solid #f1f1f1;
    border-radius: 2px;
  }
  .block p {
    margin: 10px 0;
  }
</style>
